<template>
    <div class="news">
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <button @click="showNewsDetail(news)">查看新闻 </button>
                <RouterLink
                    :to="{
                        name: 'detail',
                        query: {
                            id: news.id,
                            title: news.title,
                            content: news.content
                        }
                    }"
                    >
                        {{ news.title }}
                </RouterLink>
            </li>
        </ul>
        <div class="news-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts" name="News">
    import { reactive } from 'vue';
    import { useRouter} from 'vue-router'

    const newsList = reactive([
        {id: '1', title: '1 kinds of food', content: 'xi lan follower'},
        {id: '2', title: 'how to be rich in one night', content: 'learn it'},
        {id: '3', title: 'what!', content: 'tomorrow is monday'},
        {id: '4', title: 'good news!', content: 'you will be rich and ...'},
    ])

    const router = useRouter();

    interface NewsInter {
        id: string,
        title: string,
        content: string
    }

    function showNewsDetail(news:NewsInter) {
        router.push({
            name: 'detail',
            query: {
                id: news.id,
                title: news.title,
                content: news.content
            }
        })
    }
</script>

<style scoped>
    .news {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }
    .news ul {
        margin-top: 30px;
        /* list-style: none; */
        padding-left: 10px;
    }

    .news li::marker {
        color: #64967E;
    }
    .news li>a {
        font-size: 18px;
        line-height: 40px;
        text-shadow: none;
        color: #64967e;
        text-shadow: 0 0 1px rgb(0, 84, 0);
    }
    .news-content {
        width: 70%;
        height: 90%;
        border: 1px solid;
        margin-top: 20px;
        border-radius: 10px;
    }
</style>